<template>
  <div class="menu-container">
    <a-card class="card">
      <a-button @click="onWinFull" type="primary">body切换全屏</a-button>
      <a-card ref="cardRef" id="cardRef" class="card content">
        <div>DOM元素切换全屏</div>
        <a-button @click="onDivFull" type="primary">元素全屏</a-button>
      </a-card>
    </a-card>
  </div>
</template>
<script lang='ts' setup>
import * as util from '@/util/util';
import { ref } from 'vue';
let isFull = false;
const onWinFull = () => {
  util.fullScreen(document.body);
}
const onDivFull = () => {
  isFull = !isFull;
  const dom = document.getElementById('cardRef');
  if (!isFull) {
    util.exitFullscreen();
    return;
  }
  util.fullScreen(dom);
}
</script>
<style lang='less' rel='stylesheet/less' scoped>
.menu-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }

  .content {
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }
}
</style>